How to Configure the Search Menu

 

About

The SearchMenu has the following features/functions:

  • Used to navigate between different SmartHub pages. See the image below.

  • Disabled by default.

  • Available on the Index, Landing, and Results HTML pages

  • SearchMenu settings are found in the file DefaultModuleSettings.js, which is accessible from the UI Builder

  • Enable and modify the SearchMenu feature using the UI Builder

  • To customize the SearchMenu template, see the topic "How to Customize the Template," below

Customizing SearchMenu

UI Builder

  • To add/modify/remove a refiner the Results page, use the procedure below.

  • The easiest and fastest way to change the logo is via the SmartHub UI Builder.

  • For information about how to access the UI Builder as well as who can access it, see How to Use the UI Builder.

Procedure:

  1. SmartHub administrators can simply click the UI Editor link from the SmartHub ADMINISTRATION page.

  2. Click the Select a page link from the top menu.

  3. Select (double-click) the HTML page (Index, Results, Landing, etc.).

    1. Below, the Index.html page is shown for sample purposes.

    2. BA Insight recommends you create your own custom page and folder to modify. Leave the default files as templates.

      1. Example: pages/index.html, shown below. Default Index.html is under the top most SmartHub directory.

      2. See How to Create Custom Pages.

  4. Select the Advanced mode from the top right of the page.

  5. Select the Customize ContentContainers link from the top of the page.

  6. Select the Advanced settings edit link at the top center of the page.

  7. Scroll down to around line 169.

  8. To access the available SearchMenu settings, click the See Default Settings link in the top right corner.

  9. A new browser tab opens with all available SmartHub module settings.

  10. Search for the word "SearchMenu" on the page to quickly navigate to the SearchMenu settings, shown below:

  11. Copy the SearchMenu settings section.

  12. Go back to your Advanced settings edit tab.

  13. Paste the copied settings inside the section SH.SearchMenu.CustomSettings.

    1. Note the Template file referenced (line 789 in the image above)

    2. To modify the SearchMenu template, see "How to Customize the Template, below"

  14. Click Save changes.

  15. Ensure SmartHub is loading your modified HTML file.

  16. This is set in IIS for your SmartHub site under Default Document.

    1. If your new custom page is not shown, click Add, and enter the relative path to your file.


General Options for the SearchMenu Module

Option Value Description

SearchMenuTemplate

string

Default: SH.RootLevelURL + "/modules/SearchMenu/SearchMenuTemplate.html"

 The path to the template used to render the menu

ParentContainerSelector

string

Default: '#menu'

 The selector for the parent HTML element.

Items

array

Default: 

 {
        'label': "All".toLocaleString(),
        'url': "/Results.html",
        'iconClass': 'fas fa-search',
        'preserveQueryState': true,
        'preserveRefiners': false,
        'preserveQuerySource': false,
        'showTabCount': true,
        'queryTemplate': '{searchboxquery} FederatorBackends:"*"',
        'querySourceId': 'b29924a9-ec32-4c10-8892-a544b69ee121'
  }

 The list of menu items

Options for the Menu Items

Option Value Description

label

string

Default:  "All".toLocaleString()

 The label of the menu item

url

string

Default: "/Results.html"

 The URL where the menu item redirects at click

iconClass

string

Default: 'fas fa-search'

 The CSS class for the menu item icon

preserveQueryState

boolean

Default: false

 Setting it on true preserves the query text and custom attributes when switching menu tabs

preserveRefiners

boolean

Default: false

Setting it on true preserves the applied refiners when switching menu tabs.

PreserverQueryState also needs to be set to true.

Note: This setting is incompatible with showTabCount=true

          The tab count will not take into account any presevered refiner. 

preserveQuerySource

boolean

Default: false

Setting it on true preserves the query source when switching tabs.

PreserverQueryState also needs to be set to true.

Note: This setting is incompatible with showTabCount=true

          The tab count will not take into account any presevered query source. 

showTabCount

boolean

Default: false

Setting it on true will show the result counts for the existing menu tabs.

Note: This setting is incompatible with preserveRefiners=true

Note: This setting is incompatible with preserveQuerySource=true

queryTemplate

string

Default: '{searchboxquery} FederatorBackends:"*"'

 The query template used on the page specified at the URL setting

querySourceId

string

Default: 'b29924a9-ec32-4c10-8892-a544b69ee121' 

The query source id used on the page specified at the URL setting

expertiseConfig

object

The expertise configuration if the page mentioned at the URL setting is an Expertise page.

Note: The count for the tabs that use Sharepoint Online backends will also contain the duplicate items.

Tip: If the admin configured the query template for a page to do XRANK (i.e. ({searchboxquery}) XRANK(cb=100) Author:Jim)  the queryTemplate setting for the tab should not include the XRANK condition.

How to Customize the Template

  1. Duplicate the out-of-the-box, template specified in the SearchMenuTemplate setting: 
    1. <SmartHub_install_dir>/modules/SearchMenu/SearchMenuTemplate.html
  2. Change the SearchMenuTemplate setting to point to the new template.
  3. Customize the copy created at step 1, making sure that the existing HTML structure is kept and the existing CSS classes are still used.
Out-of-the-Box SearchMenu Template
Copy 
div class="megamenu">
    <a href="javascript:void(0);" class="menu-header" onclick="SH.SearchMenu.toggleMenu()">
        <div class="menu-header-wrapper">
            <div class="menu-icon-wrapper">
                <span class="menu-icon sh-icon-button">
                    <i class="fas fa-bars"></i>
                </span>
                <span class="menu-header-text" title="Menu">Menu</span>
            </div>
        </div>
    </a>
    <div class="menu-links" data-automation-id="searchMenuLinks">
        <%
        for(var key =0; key < Items.length; key++){
        var link = SH.SearchMenu.processUrl(Items[key]);
        var label = Items[key].label;
        var itemClass = SH.SearchMenu.isActiveTab(link.toLowerCase()) ? "active" : "";
        var iconClass = Items[key].iconClass;
        %>
        <a onclick="SH.SearchMenu.processItem(<%= key %>)" class="<%= itemClass %>" data-tab-index="<%= key %>" data-automation-id="searchMenuLink">
            <span class="menu-icon <%= iconClass %>"></span>
            <span><%= label %></span>
            <% if(Items[key].showTabCount) {%>
            <span class="menu-count">
                <span class="loader hidden" data-automation-id="searchMenuLinksLoader"><i class="fas fa-sync-alt fa-spin"></i></span>
                <span class="count">
                    <span class="count-value" data-automation-id="searchMenuLinksCountValue"></span>
                </span>
            </span>
            <%} %>
        </a>
        <% } %>
    </div>
</div>